<template>
  <GBasicModal
    :destroyOnClose="true"
    width="600px"
    okText="确定"
    @ok="handleConfirm"
    @register="registerModal"
    :maskClosable="false"
    style="top: 20px"
    wrapClassName="recommend-result-modal"
  >
    <template #title>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="问卷信息" />
        <a-tab-pane key="2" tab="推荐课程" />
      </a-tabs>
    </template>

    <div class="text-sm" v-show="activeKey == '1'">
      <div v-for="i in 10" :key="i" class="not-last:mb-2">
        <div class="font-semibold mb-2">{{ i + 1 }}、七七七七七</div>
        <div class="p-3 bg-black/3">
          哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
      </div>
    </div>
    <div class="" v-show="activeKey == '2'">
      <div class="bg-black/3 not-last:mb-2" v-for="i in 10" :key="i">
        <div
          class="border-0 border-b-1 border-solid border-black/6 p-3 flex items-center justify-between"
        >
          <div class="flex items-center">
            <span class="text-base font-semibold">升级定位</span>
            <g-button type="link">查看详情</g-button>
          </div>
          <div>
            <g-button
              type="primary"
              ghost
              shape="round"
              class="mr-2"
              v-if="!editCourseId"
              @click="handleEdit(i)"
              >编辑</g-button
            >
            <g-button shape="round" ghost class="mr-2" @click="handleDelCourse(i)">删除</g-button>
            <g-button shape="round" ghost class="mr-2" v-if="editCourseId == i">取消</g-button>
            <g-button type="primary" shape="round" v-if="editCourseId == i" @click="handleSave"
              >完成</g-button
            >
          </div>
        </div>
        <div class="p-3 text-sm">
          <div v-if="editCourseId == i" class="relative">
            <a-textarea :rows="5" allow-clear v-model:value="input" :max-length="100" />
            <span class="absolute bottom-2 right-3 text-xs text-black/45 z-10"
              >{{ input.length }}/100</span
            >
          </div>
          <span v-else>十四号斯哈斯是是是是 </span>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex items-center justify-end">
        <g-button class="mr-2" @click="handleGenLink">生成链接</g-button>
        <g-button type="primary">编辑</g-button>
      </div>
    </template>
  </GBasicModal>
</template>

<script lang="ts" setup>
  import { useModalInner } from '@/components/Modal';

  const { createMessage, createConfirm, createInfoModal } = useMessage();

  const emits = defineEmits(['ok', 'register']);

  const activeKey = ref('1');

  const editCourseId = ref('');

  const input = ref('');

  const [registerModal, { closeModal }] = useModalInner(({ id }) => {
    //加载用户问卷
  });

  const handleConfirm = () => {
    handleClose();
  };

  const handleClose = () => {
    closeModal();
    emits('ok');
  };

  const handleEdit = (id) => {
    editCourseId.value = id;
  };

  const handleSave = () => {
    input.value = '';
  };

  const handleDelCourse = (i) => {
    createConfirm({
      title: '提示',
      iconType: 'error',
      content: '确认删除该课程吗?',
      onOk: () => {
        createInfoModal({
          content: '课程已删除，请点击“生成链接”重新生成最新结果页',
        });
      },
    });
  };

  const handleGenLink = () => {
    createInfoModal({
      iconType: undefined,
      content: '课程已删除，请点击“生成链接”重新生成最新结果页',
    });
  };
</script>

<style lang="less">
  .recommend-result-modal {
    .ant-modal {
      top: 20px;
    }

    .ant-tabs-nav {
      @apply mb-0;

      &::before {
        @apply !border-0;
      }
    }

    .ant-modal-header {
      padding-bottom: 0;
    }
  }
</style>
